<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>isometric-card</title>
    <style>
        .isometric-card {
            margin: 0 auto;
            transform: rotateX(51deg) rotateZ(43deg);
            transform-style: preserve-3d;
            background-color: #fcfcfc;
            will-change: transform;
            width: 240px;
            height: 320px;
            border-radius: 2rem;
            box-shadow: 1px 1px 0 1px #f9f9fb,-1px 0 28px 0 rgba(34,33,81,.01),
                        28px 28px 28px 0 rgba(34,33,81,.25);
            transition: .4s ease-in-out transform,.3s ease-in-out box-shadow;
            cursor: pointer;
        }
        .isometric-card:hover {
            transform: translate3d(0px,-16px,0px) rotateX(51deg) rotateZ(43deg);
            box-shadow: 1px 1px 0 1px #f9f9fb,-1px 0 28px 0 rgba(34,33,81,0.01),
                        54px 54px 28px -10px rgba(34,33,81,.15);
        }
    </style>
</head>
<body>
    <div class="isometric-card"></div>
</body>
</html>